<!-- 修改密码 -->
<template>
  <div class="my-password">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="手机号" prop="phone">
        <el-input v-model.trim="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="验证码">
        <el-input v-model.trim="ruleForm.smscode">
          <template slot="suffix">
            <span class="smscode" v-if="codeTimeShow" @click="sendCode('ruleForm')">获取验证码</span>
            <span class="smscode" v-if="!codeTimeShow" style="color: #ccc">{{sendCodeTime+'s'}}</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="pass">
        <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm.confirmPassword" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
import md5 from 'js-md5'
import {register} from '@/api/user'
import {getSmscode} from '@/api/publicMd'
import {validateRules} from '@/utils/validateRules'

export default {
  name: 'MyPassword',
  components: {},
  props: {},
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      sendCodeTime: 60,
      codeTimeShow: true,
      ruleForm: {
        phone: '',
        password: '',
        confirmPassword: '',
        smscode: ''
      },
      rules: {
        phone: [{validator: validateRules.phoneNumber, trigger: 'blur'}],
        pass: [{validator: validatePass, trigger: 'blur'}],
        checkPass: [{validator: validatePass2, trigger: 'blur'}]
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
    submitForm(formName) {
      const _this = this
      if (_this.ruleForm.smscode) {
        _this.$refs[formName].validate(valid => {
          if (valid) {
            _this.ruleForm.password = md5(_this.ruleForm.password)
            _this.ruleForm.confirmPassword = md5(_this.ruleForm.confirmPassword)
            register({
              ..._this.ruleForm.pass
            }).then(res => {
              let {success, message} = res.data

              if (success) {
                let {token, userInfo} = res.data.result
                _this.$store.commit('SET_TOKEN', token)
                _this.$store.commit('SET_USER_INFO', userInfo)
                _this.$message.success(message)
              } else {
                _this.$message.error(message)
              }
            })
          }
        })
      } else {
        _this.$message.error('请填写短信验证码')
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getCodeTime() {
      this.codeTimeShow = false
      this.timer = setInterval(() => {
        this.sendCodeTime--
        if (this.sendCodeTime === 0) {
          this.codeTimeShow = true
          this.sendCodeTime = 60
          clearInterval(this.timer)
        }
      }, 1000)
    },
    sendCode(formName) {
      const _self = this
      _self.$refs[formName].validateField('phone', phoneError => {
        if (!phoneError) {
          // 获取手机短信
          getSmscode({
            mobile: _self.ruleForm.phone,
            smsmode: 2
          }).then(res => {
            let {success, message} = res.data
            if (success) {
              _self.$message.success(message)
              // 验证码倒计时
              _self.getCodeTime()
            } else {
              _self.$message.error(message)
            }
          })
        }
      })
    }
  },
  created() {},
  mounted() {}
}
</script>


<style lang='less' scoped>
.my-password {
  width: 400px;
}
.smscode {
  font-size: 16px;
  color: #1c3e96;
  padding: 6px 30px;
}
</style>